<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effect
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/extension/dataTool.min.js"></script>
        -->
  <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
  <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
  <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/map/js/world.js"></script>
        -->
  <!-- Uncomment these two lines if you want to use bmap extension -->
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=pGeM4NYffU1Gls4DG0Yf97KMwGjChAZW"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/extension/bmap.min.js"></script>


  <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;

    var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'

    $.get(ROOT_PATH + '/data/asset/data/lines-bus.json', function (data) {
      let hStep = 300 / (data.length - 1);
      let busLines = [].concat.apply(
        [],
        data.map(function (busLine, idx) {
          let prevPt = [];
          let points = [];
          for (let i = 0; i < busLine.length; i += 2) {
            let pt = [busLine[i], busLine[i + 1]];
            if (i > 0) {
              pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
            }
            prevPt = pt;
            points.push([pt[0] / 1e4, pt[1] / 1e4]);
          }
          return {
            coords: points,
            lineStyle: {
              normal: {
                color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
              }
            }
          };
        })
      );
      myChart.setOption(
        (option = {
          bmap: {
            center: [116.46, 39.92],
            zoom: 10,
            roam: true,
            mapStyle: {
              styleJson: [
                {
                  featureType: 'water',
                  elementType: 'all',
                  stylers: {
                    color: '#031628'
                  }
                },
                {
                  featureType: 'land',
                  elementType: 'geometry',
                  stylers: {
                    color: '#000102'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#000000'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry.stroke',
                  stylers: {
                    color: '#0b3d51'
                  }
                },
                {
                  featureType: 'local',
                  elementType: 'geometry',
                  stylers: {
                    color: '#000000'
                  }
                },
                {
                  featureType: 'railway',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#000000'
                  }
                },
                {
                  featureType: 'railway',
                  elementType: 'geometry.stroke',
                  stylers: {
                    color: '#08304b'
                  }
                },
                {
                  featureType: 'subway',
                  elementType: 'geometry',
                  stylers: {
                    lightness: -70
                  }
                },
                {
                  featureType: 'building',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#000000'
                  }
                },
                {
                  featureType: 'all',
                  elementType: 'labels.text.fill',
                  stylers: {
                    color: '#857f7f'
                  }
                },
                {
                  featureType: 'all',
                  elementType: 'labels.text.stroke',
                  stylers: {
                    color: '#000000'
                  }
                },
                {
                  featureType: 'building',
                  elementType: 'geometry',
                  stylers: {
                    color: '#022338'
                  }
                },
                {
                  featureType: 'green',
                  elementType: 'geometry',
                  stylers: {
                    color: '#062032'
                  }
                },
                {
                  featureType: 'boundary',
                  elementType: 'all',
                  stylers: {
                    color: '#465b6c'
                  }
                },
                {
                  featureType: 'manmade',
                  elementType: 'all',
                  stylers: {
                    color: '#022338'
                  }
                },
                {
                  featureType: 'label',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                }
              ]
            }
          },
          series: [
            {
              type: 'lines',
              coordinateSystem: 'bmap',
              polyline: true,
              data: busLines,
              silent: true,
              lineStyle: {
                // color: '#c23531',
                // color: 'rgb(200, 35, 45)',
                opacity: 0.2,
                width: 1
              },
              progressiveThreshold: 500,
              progressive: 200
            },
            {
              type: 'lines',
              coordinateSystem: 'bmap',
              polyline: true,
              data: busLines,
              lineStyle: {
                width: 0
              },
              effect: {
                constantSpeed: 20,
                show: true,
                trailLength: 0.1,
                symbolSize: 1.5
              },
              zlevel: 1
            }
          ]
        })
      );
    });

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

  </script>
</body>

</html>